<template>
    <view class="richDetail">
        <view class="cardBox">
            <view class="wicketBox">
                <view>操作流程</view>
            </view>

            <view class="typeBox">
                <rich-text :nodes="dataDetail.handlingText"></rich-text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dataDetail:{}
        }
    },
    onLoad(options) {
        this.id = options.id
        this.getData()
    },
    methods: {
        getData() {
            uni.showLoading({
                mask: true,
            })
            this.$asynApi.guideAllListDetail(this.id).then(val => {
                this.dataDetail = val.data
                console.log(this.dataDetail);
                
const regex = new RegExp('img', 'gi')
this.dataDetail.handlingText = this.dataDetail.handlingText.replace(regex,`img style="max-width:100%;border-radius: 10px;"`)
                uni.hideLoading()
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    height: var(--status-bar-height);
    width: 100%;
}
.richDetail {
    // background-color: #fff;
    background: url("../static/handbookDetail.png") no-repeat top;
    background-size: 100% 100%;
    min-height: 100vh;
    .wicketBox {
        background-image: url("../static/guideTitle.png");
        background-size: 100% 100%;
        padding: 30rpx 50rpx 50rpx 30rpx;
        // border-radius: 30rpx;
        margin-top: 30rpx;
        view:nth-child(1) {
            font-size: 36rpx;
            font-weight: 600;
            color: #fff;
            // text-shadow: 0rpx 5rpx 5rpx #40d9ff;
        }
        view:nth-child(2) {
            background-color: #ffd75c;
            font-size: 22rpx;
            padding: 5rpx 10rpx;
            font-weight: 600;
            color: #095be8;
            width: fit-content;
            border-radius: 5rpx;
            margin-top: 10rpx;
            // text-shadow: 0rpx 5rpx 5rpx #40D9FF;
        }
    }
    .cardBox {
        width: calc(100% - 80rpx);
        min-height: 90vh;
        margin: 0 auto;
        padding: 0rpx 20rpx 20rpx 20rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        position: relative;
        // top: -40rpx;
        border-radius: 40rpx 40rpx 0 0;
        // background-color: #fff;
        overflow: hidden;
    }
    .typeBox {
        padding: 20rpx 30rpx 1rpx 30rpx;
        min-height: 82vh;
        // text-align: center;
        position: relative;
        top: -50rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }
}
</style>